<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>广告管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

	<!-- 引入 bootstrap-fileinput -->
	<script type="text/javascript" src="../bootstrap-fileinput/js/fileinput.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../bootstrap-fileinput/css/fileinput.min.css">
	<script type="text/javascript" src="../bootstrap-fileinput/js/locales/zh.js"></script>
	<script type="text/javascript">
		$(function () {
			fileInit();
			getContent();

		});

		function getContent() {
			$.ajax({
				url:"/content/getContent",
				type:"post",
				dataType:"json",
				async:true,
				success:function(result){
					if (result.code==200) {
						var contentList=result.data;
						var table="";
						$(contentList).each(function (i,v) {
							table+="<tr>";
							table+="<td><input  type='checkbox' name='box' value='"+v.id+"'></td>";
							table+="<td>"+v.id+"</td>";
							table+="<td>"+v.categoryId+"</td>";
							table+="<td>"+v.title+"</td>";
							table+="<td>"+v.url+"</td>";
							table+="<td>";
							table+="<img  src='"+v.pic+"' width='100px' height='50px'>";
							table+="</td>";
							table+="<td>"+v.sortOrder+"</td>";
							if (v.status==0){
								table+="<td>无效</td>";
							} else if (v.status==1) {
								table+="<td>有效</td>";
							}
							table+="<td class='text-center'>";
							table+="<button type='button' class='btn bg-olive btn-xs' data-toggle='modal' data-target='#editModal' " +
									"onclick='toUpdate("+v.id+")'>修改</button>";
							table+="</td>";
							table+="</tr>"
						})
						$("#bodyId").html(table);
					}else {
						alert(result.message)
					}
				},error:function(result){
					alert("系统异常，请联系管理员！");
				}
			})
		}

		//添加还是修改
		function addOrUpdate() {
			var id=$("#id").val();
			var categoryId=$("#categoryId").val();
			var title=$("#title").val();
			var url=$("#url").val();
			var sortOrder=$("#sortOrder").val();
			var pic=$("#pic").val();
			var status;
			if ($("input[name=status]:checked")) {
			    status = 1;
            }else {
			    status = 0;
            }
			$.ajax({
				url:"/content/addOrUpdate",
				type:"post",
				dataType:"json",
				data:{id:id,categoryId:categoryId,title: title,url:url,sortOrder:sortOrder,pic:pic,status:status},
				async:false,
				success:function(result){
					if(result.code == 200){
						alert(result.message)
					}else {
						alert(result.message)
					}
					window.location.reload();
				},
				error:function(result){
					alert("系统异常，请联系管理员！");
				}
			})
		}
		//回显
		function toUpdate(id) {
			$.ajax({
				url:"/content/getContentById",
				type:"post",
				dataType:"json",
				data:{id:id},
				async:false,
				success:function(result){
					if(result.code == 200){
						var content=result.data;

						$("#id").val(content.id);

						$("#categoryId").val(content.categoryId);

						$("#title").val(content.title);

						$("#url").val(content.url);

						$("#sortOrder").val(content.sortOrder);

						$("#pic").val(content.pic);
						$("#pic2").prop("src",content.pic);

						if (content.status == 1) {
							$("#status").prop("checked",true);
						}
					}else {
						alert(result.message)
					}
				},
				error:function(result){
					alert("系统异常，请联系管理员！");
				}
			})
		}
		//批量删除
        function deleteContent() {
            var boxs = $("input[name=box]:checked");

            var ids = [];
            $(boxs).each(function (i,e) {
                ids.push($(e).val());
            })
            if (ids.length<=0){
                alert("请选择删除的行");
            }
            if (confirm("确定删除id为"+ ids +"的行？")) {

                $.ajax({
                    url:"/content/deleteContent",
                    data:{ids:ids},
                    type:"post",
                    dataType:"json",
                    async:true,
                    success:function(result){
                        alert(result.message);
                        window.location.reload();
                    },
                    error:function(){
                        alert("删除失败");
                    }
                })
            }
        }
		function fileInit(){
			$('#myFile').fileinput({
				language: 'zh',
				uploadUrl: '/content/upload',
				maxFileCount :3, // multiple
				enctype : 'multipart/form-data',
				maxFileSize : 1024, //单位为kb
				allowedFileExtensions : ['jpg', 'gif', 'png'],//限制上传文件类型
				browseClass: 'btn btn-primary'
			});
			$('#myFile').on('fileuploaded',function(event, data, previewId, index){
				//data.response获取的就是后台return 的对象
				var result = data.response;
				var url = result.data;
				$("#pic").val(url);
			})
		}
	</script>
    
</head>

<body class="hold-transition skin-red sidebar-mini">
  <!-- .box-body -->
                
                    <div class="box-header with-border">
                        <h3 class="box-title">广告管理</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button type="button" class="btn btn-default" onclick="deleteContent()" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
                                        <button type="button" class="btn btn-default" title="开启" onclick='confirm("你确认要开启吗？")'><i class="fa fa-check"></i> 开启</button>
                                        <button type="button" class="btn btn-default" title="屏蔽" onclick='confirm("你确认要屏蔽吗？")'><i class="fa fa-ban"></i> 屏蔽</button>
                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
							                                  
                                </div>
                            </div>
                            <!--工具栏/-->

			                  <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			                      <thead>
			                          <tr>
			                              <th class="" style="padding-right:0px">
			                                  <input id="selall" type="checkbox" class="icheckbox_square-blue">
			                              </th> 
										  <th class="sorting_asc">广告ID</th>
									      <th class="sorting">分类ID</th>
									      <th class="sorting">标题</th>
									      <th class="sorting">URL</th>		
									      <th class="sorting">图片</th>	
									      <th class="sorting">排序</th>		
									      <th class="sorting">是否有效</th>											     						      							
					                      <th class="text-center">操作</th>
			                          </tr>
			                      </thead>
			                      <tbody th:id="bodyId">

			                      </tbody>
			                  </table>
			                  <!--数据列表/--> 
                        </div>
                        <!-- 数据表格 /-->
                     </div>
                    <!-- /.box-body -->

		
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">广告编辑</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped"  width="800px">
				<tr>
		      		<td>广告分类</td>
		      		<td>
						<input type="hidden" th:id="id" name="id">
						<select class="form-control" id="categoryId" name="categoryId">
							<option value="-1">请选择</option>
							<option th:each="c : ${contentCategory}" th:value="${c.id}">[[${c.name}]]</option>
						</select>
		      		</td>
		      	</tr>
		      	<tr>
		      		<td>标题</td>
		      		<td><input  class="form-control" th:id="title" placeholder="标题" >  </td>
		      	</tr>
			    <tr>
		      		<td>URL</td>
		      		<td><input  class="form-control" th:id="url" placeholder="URL" >  </td>
		      	</tr>	
		      	<tr>
		      		<td>排序</td>
		      		<td><input  class="form-control" th:id="sortOrder" placeholder="排序" >  </td>
		      	</tr>			      	
		      	<tr>
		      		<td>广告图片</td>
		      		<td>
						<table>
							<tr>
								<td>
									<input type="file" th:id="myFile" name="myFile" multiple />
									<input type="text" name="pic" th:id="pic" value="">
								</td>
							</tr>
							<tr>
								<td>
									<img  src='' width='200px' height='100px' th:id="pic2">
								</td>
							</tr>
						</table>
		      		</td>
		      	</tr>	      
		      	<tr>
		      		<td>是否有效</td>
		      		<td>
		      		   <input type="checkbox" th:id="status" name="status" class="icheckbox_square-blue" >
		      		</td>
		      	</tr>  	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" data-dismiss="modal" onclick="addOrUpdate()" aria-hidden="true">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>

</body>

</html>